<template>
  <div class="choice" v-if="show">
    <button class="phonePassword" @click="phonePassword" :class="phonePSelecter? 'phonePSelecter' : ''">手机号码方式找回</button>
    <button class="emilPassword" @click="emilPassword" :class="emilPSelecter? 'phonePSelecter' : ''">邮箱方式找回</button>
    <button class="choiceBtn" @click="choiceBtn">下一步</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      phonePSelecter: false,
      emilPSelecter: false
    }
  },
  props: [
    'show'
  ],
  methods: {
    choiceBtn: function () {
      var typeShow;
      if (this.phonePSelecter) {
        typeShow = 0
      } else if (this.emilPSelecter) {
        typeShow = 1
      }
      var obj = {
          'identityShow': false,
          'messageShow': false,
          'passwordShow': true,
          'completeShow': false,
          'identityShowI': true,
          'messageShowI': true,
          'passwordShowI': false,
          'completeShowI': false,
          'typeShow': typeShow
        }
      this.$emit('flowPClick', obj);
    },
    phonePassword: function () {
      if (this.phonePSelecter) {
        this.phonePSelecter = false
      } else {
        this.phonePSelecter = true
        this.emilPSelecter = false           
      }
    },
    emilPassword: function () {
      if (this.emilPSelecter) {
        this.emilPSelecter = false
      } else {
        this.emilPSelecter = true
        this.phonePSelecter = false        
      }
    }
  }
}
</script>

<style>
  .choice {
    width: 1000px;
    margin: 0 auto;
  }
  .phonePassword, .emilPassword{
    width: 401px;
    height: 83px;
    display: block;
    margin: 0 auto;
    border: 1px solid #186175;
    border-radius: 3px;
    font-size: 24px;
    color: #186175;
    letter-spacing: 1px;
    background: #fff;
    margin-bottom: 5px;
    cursor: pointer;   
    outline: none; 
  }
  .choiceBtn {
    width: 180px;
    height: 40px;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 2px;
    background: #186175;
    display: block;
    margin: 0 auto;
    border: none;
    margin-top: 98px;
    cursor: pointer;
    outline: none;     
  }
  .phonePSelecter {
    background: #186175;
    color: #FFFFFF;    
  }
</style>
